<template>
    <div class="radioranking">
        <Header :isBack="isBack" :title="title"></Header>
        <div class="top-nav bg-f space-around">
            <div class="fs-32 center" :class="{current:cur==1}" @click="select(1)">主播榜</div>
            <div class="fs-32 center" :class="{current:cur==2}" @click="select(2)">节目榜</div>
            <div class="fs-32 center" :class="{current:cur==3}" @click="select(3)">电台榜</div>
        </div>
        <div class="content">
            <div class="host-ranking" v-if="cur==1">
                <div class="new-ranking bg-f padding-24">
                    <router-link to="radionewlist" class="top arrow-right fs-36 center-col">新人榜</router-link>
                    <div class="list center-col">
                        <div class="list-item" v-for="(item,index) in newranklist" :key="index" v-if="index<3">
                            <div class="cove">
                                <img :src="item.user_avator" alt="" class="yuan">
                                <p class="yuan bg-r color-f fs-30 center host">{{index+1}}</p>
                            </div>
                            <p class="name overFlow fs-32">{{item.nickname}}</p>
                            <div class="fire center">
                                <img :src="fire" alt="">
                                <p class="fs-24 color-9">{{item.view_number}}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="hot-host bg-f">
                    <p class="top padding-24 fs-36">最热主播</p>
                    <div class="list">
                        <div class="list-item space-between padding-24" v-for="(item,index) in hotlist" :key="index">
                            <div class="left" :class="{red:index<=2}">{{index+1}}</div>
                            <div class="right space-between">
                                <div class="lefts center-col">
                                    <img :src="item.user_avator" alt="" class="yuan">
                                    <p class="fs-32 color-0 overFlow">{{item.nickname}}</p>
                                </div>
                                <div class="rights center-col">
                                    <img :src="fire" alt="">
                                    <p class="fs-24 color-9 ">{{item.view_number}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="host-ranking" v-if="cur==2">
                <div class="new-ranking bg-f padding-24">
                    <router-link to="radiotimelist" class="top arrow-right fs-36 center-col">24小时榜</router-link>
                    <div class="list center-col">
                        <div class="list-item" v-for="(item,index) in timelist" :key="index" v-if="index<3">
                            <div class="cove">
                                <img :src="item.program_cover" alt="" class="fang">
                                <p class="bg-r color-f fs-30 center times">{{index+1}}</p>
                            </div>
                            <p class="name overFlow fs-32">{{item.program_name}}</p>
                            <div class="fire center">
                                <img :src="fire" alt="">
                                <p class="fs-24 color-9">{{item.view_number}}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="hot-show bg-f">
                    <p class="top padding-24 fs-36">最热节目</p>
                    <div class="list">
                        <div class="list-item space-between padding-24" v-for="(item,index) in hotshow" :key="index">
                            <div class="left" :class="{red:index<=2}">{{index+1}}</div>
                            <div class="right space-between">
                                <img :src="item.program_cover" alt="" class="lefts">
                                <div class="rights space-between">
                                    <div class="flex-column">
                                        <p class="fs-32 overFlow">{{item.program_name}}</p>
                                        
                                        <div class="center-col">
                                            <img :src="item.user_avator" alt="" class="yuan">
                                            <p class="fs-22 ">{{item.nickname}}</p>
                                            <img :src="fire" alt="" class="fire">
                                            <p class="fs-22">{{item.view_number}}</p>
                                        </div>
                                    </div>
                                    <div class="play">
                                        <img :src="playing" alt="" v-if="item.isplay==1">
                                        <img :src="noplay" alt="" v-else>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="host-ranking " v-if="cur==3">
                <div class="hot-radio bg-f padding-24">
                    <p class="top fs-36">最热电台</p>
                    <div class="list">
                        <div class="list-item center-col" v-for="(item,index) in hotradio" :key="index">
                            <div class="left" :class="{red:index<=2}">{{index+1}}</div>
                            <img :src="item.radio_cover" alt="" class="cove">
                            <div class="right flex-column">
                                <p class="fs-32 overFlow">{{item.radio_name}}</p>
                                <p class="fs-22 overFlow-2">{{item.radio_desc}}</p>
                                <div class="center-col">
                                    <img :src="fire" alt="">
                                    <p class="fs-22">{{item.view_number}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            isBack:true,
            title:'主播电台排行榜',
            cur:1,
            playing:require('../../assets/index/playing.png'),
            noplay:require('../../assets/index/playradio.png'),
            fire:require('../../assets/mine/fire.png'),
            newranklist:[
                // {
                //     img:require('../../assets/image/cove.png'),
                //     name:'胆小鬼胆哈哈哈哈哈哈哈哈哈哈哈',
                //     num:599,
                //     title:'呵呵',
                //     isplay:1,
                // },
                // {
                //     img:require('../../assets/image/cove.png'),
                //     name:'胆小鬼胆哈哈哈',
                //     num:599,
                //     title:'呵呵',
                //     isplay:0,
                // },
                // {
                //     img:require('../../assets/image/cove.png'),
                //     name:'胆小鬼胆哈哈哈',
                //     num:599,
                //     title:'呵呵',
                //     isplay:0,
                // },
                // {
                //     img:require('../../assets/image/cove.png'),
                //     name:'胆小鬼胆哈哈哈',
                //     num:599,
                //     title:'呵呵',
                //     isplay:0,
                // }
            ],
            hotlist:[
                // {
                //     img:require('../../assets/image/cove.png'),
                //     name:'胆小鬼胆哈哈哈哈哈哈哈哈哈哈哈',
                //     num:599,
                //     title:'呵呵',
                //     isplay:1,
                // },
                // {
                //     img:require('../../assets/image/cove.png'),
                //     name:'胆小鬼胆哈哈哈',
                //     num:599,
                //     title:'呵呵',
                //     isplay:0,
                // },
                // {
                //     img:require('../../assets/image/cove.png'),
                //     name:'胆小鬼胆哈哈哈',
                //     num:599,
                //     title:'呵呵',
                //     isplay:0,
                // },
                // {
                //     img:require('../../assets/image/cove.png'),
                //     name:'胆小鬼胆哈哈哈',
                //     num:599,
                //     title:'呵呵',
                //     isplay:0,
                // }
            ],
            timelist:[
                //  {
                //     img:require('../../assets/image/cove.png'),
                //     name:'胆小鬼胆哈哈哈哈哈哈哈哈哈哈哈',
                //     num:599,
                //     title:'呵呵',
                //     isplay:1,
                // },
                // {
                //     img:require('../../assets/image/cove.png'),
                //     name:'胆小鬼胆哈哈哈',
                //     num:599,
                //     title:'呵呵',
                //     isplay:0,
                // },
                // {
                //     img:require('../../assets/image/cove.png'),
                //     name:'胆小鬼胆哈哈哈',
                //     num:599,
                //     title:'呵呵',
                //     isplay:0,
                // },
                // {
                //     img:require('../../assets/image/cove.png'),
                //     name:'胆小鬼胆哈哈哈',
                //     num:599,
                //     title:'呵呵',
                //     isplay:0,
                // }
            ],
            hotshow:[
                // {
                //     img:require('../../assets/image/cove.png'),
                //     name:'胆小鬼胆哈哈哈哈哈哈哈哈哈哈哈',
                //     num:599,
                //     title:'呵呵',
                //     isplay:1,
                // },
                // {
                //     img:require('../../assets/image/cove.png'),
                //     name:'胆小鬼胆哈哈哈',
                //     num:599,
                //     title:'呵呵',
                //     isplay:0,
                // },
                // {
                //     img:require('../../assets/image/cove.png'),
                //     name:'胆小鬼胆哈哈哈',
                //     num:599,
                //     title:'呵呵',
                //     isplay:0,
                // },
                // {
                //     img:require('../../assets/image/cove.png'),
                //     name:'胆小鬼胆哈哈哈',
                //     num:599,
                //     title:'呵呵',
                //     isplay:0,
                // }
            ],
            hotradio:[
                // {
                //     img:require('../../assets/image/cove.png'),
                //     name:'胆小鬼胆哈哈哈哈哈哈哈哈哈哈哈',
                //     num:599,
                //     title:'呵呵',
                //     isplay:1,
                // },
                // {
                //     img:require('../../assets/image/cove.png'),
                //     name:'胆小鬼胆哈哈哈',
                //     num:599,
                //     title:'呵呵',
                //     isplay:0,
                // },
                // {
                //     img:require('../../assets/image/cove.png'),
                //     name:'胆小鬼胆哈哈哈',
                //     num:599,
                //     title:'呵呵',
                //     isplay:0,
                // },
                // {
                //     img:require('../../assets/image/cove.png'),
                //     name:'胆小鬼胆哈哈哈',
                //     num:599,
                //     title:'呵呵',
                //     isplay:0,
                // }
            ]
        }
    },
    created(){
        this.getnewRadioAnchor()
        this.gethotRadioAnchor()
        this.gettwentyFourHourList()
        this.getradioProgramList()
        this.getrecommendRaido()
    },
    methods:{
        // 新人榜
        getnewRadioAnchor(){
            var url = this.$host1 + `home/radio/newRadioAnchor`;
            this.$axios.get(url,{
                params:{
                    type:1
                }
            }).then(res => {
                //console.log(res)
                //return
                if (res.status == 200) {
                    let resData = res.data;
                    if(resData.code==200){
                        
                        this.newranklist=resData.data
                        if(this.newranklist.length>3){
                            this.newranklist=this.newranklist.splice(0,3)
                        }
                    }else{
                        this.newranklist=[]
                        this.AlertWin(resData.message);
                    }   
                }
            }).catch(() => {
                this.newranklist=[]
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        // 最热主播
        gethotRadioAnchor(){
            var url = this.$host1 + `home/radio/hotRadioAnchor`;
            this.$axios.get(url,{
                params:{
                    type:1
                }
            }).then(res => {
                //console.log(res)
                //return
                if (res.status == 200) {
                    let resData = res.data;
                    
                    if (resData.code == 200) {
                        this.hotlist=resData.data
                    }else{
                        this.AlertWin(resData.message);
                    }
                }
            }).catch(() => {
                this.hotlist=[]
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        // 24小时榜
        gettwentyFourHourList(){
            var url = this.$host1 + `home/radio/twentyFourHourList`;
            this.$axios.get(url,{
                params:{
                    type:1
                }
            }).then(res => {
                //console.log(res)
                //return
                if (res.status == 200) {
                    let resData = res.data;
                    // this.newranklist=resData
                    
                    if (resData.code == 200) {
                        this.timelist=resData.data
                        if(this.timelist.length>3){
                            this.timelist=this.timelist.splice(0,3)
                        }
                    }else{
                        this.timelist=[]
                        this.AlertWin(resData.message);
                    }
                }
            }).catch(() => {
                this.timelist=[]
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        // 最热节目
        getradioProgramList(){
            var url = this.$host1 + `home/radio/radioProgramList`;
            this.$axios.get(url,{
                params:{
                    page:1,
                    pageSize:20
                }
            }).then(res => {
                //console.log(res)
                //return
                if (res.status == 200) {
                    let resData = res.data;
                    if (resData.code == 200) {
                        this.hotshow=resData.data
                        
                    }else{
                        this.hotshow=[]
                        this.AlertWin(resData.message);
                    }
                }
            }).catch(() => {
                this.hotshow=[]
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        //最热电台
        getrecommendRaido(){
            let url = this.$host1 + `home/radio/recommendRaido`
            this.$axios.get(url,{
                params:{
                    page:1,
                    pageSize:10,
                    type:1
                }
            }).then(res => {
                //console.log(res)
                //return
                if (res.status == 200) {
                let resData = res.data;
                if (resData.code == 200) {
                    this.hotradio=resData.data.result
                }else{
                    this.hotradio=[]
                    this.AlertWin(resData.message);
                }
                }
            }).catch(() => {
                this.hotradio=[]
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        select(i){
            this.cur=i
        }
    }
}
</script>
<style lang="scss">
.radioranking{
    .top-nav{
        position: fixed;
        top: 1rem;
        left: 0;
        width: 100%;
        padding: 0 1rem;
        box-sizing: border-box;
        height: 1.1rem;
        z-index: 9;
        div{
            height: 100%;
        }
        .current{
            font-size: 0.36rem;
            font-weight: bold
        }
    }
    .content{
        margin-top: 2.3rem;
        padding-top: 0.001rem;
        box-sizing: border-box;
        margin-bottom: 0.2rem;
        .host-ranking{
            .new-ranking{
                height: 4.8rem;
                .top{
                    height: 1rem;
                }
                .list{
                    height: 3.8rem;
                    width: 100%;
                    .list-item{
                        width: 1.9rem;
                        height: 3rem;
                        margin: 0 0.2rem;
                        text-align: center;
                        //background-color: greenyellow;
                        .cove{
                            width: 1.8rem;
                            height: 1.8rem;
                            margin: 0 auto;
                            position: relative;
                            img{
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                                //border-radius: 50%;
                            }
                            .fang{
                                border-radius: 0.1rem;
                            }
                            .times{
                                width: 0.52rem;
                                height: 0.52rem;
                                opacity: 0.9;
                                position: absolute;
                                top: 0;
                                left: 0;
                                border-radius: 0.1rem 0 0.1rem 0;
                            }
                            .host{
                                width: 0.52rem;
                                height: 0.52rem;
                                opacity: 0.9;
                                position: absolute;
                                top: 0;
                                left: 0;
                            }
                        }
                        .name{
                            margin-top: 0.2rem;
                        }
                        .fire{
                            //text-align: center;
                            //background-color: red;
                            width: auto;
                            height: 0.3rem;
                            margin: 0.1rem auto 0;
                            img{
                                width: 0.26rem;
                                height: 0.3rem;
                                margin-right: 0.1rem;
                            }
                        }
                    }
                }
            }
            .hot-host{
                margin-top: 0.2rem;
                height: auto;
                .top{
                    height: 1rem;
                    line-height: 1rem;
                }
                .list{
                    height: auto;
                    .list-item{
                        height: 1.2rem;
                        border-bottom: 0.01rem solid #e9e9e9;
                        .left{
                            text-align: center;
                            //background-color: greenyellow;
                            font-weight: bold;
                            width: 0.8rem;
                            font-size: 0.55rem;
                        }
                        .red{
                            color: #F44349;
                        }
                        .right{
                            width: calc(100% - 1rem);
                            height: 100%;
                            .lefts{
                                img{
                                    width: 0.9rem;
                                    height: 0.9rem;
                                    margin-right: 0.2rem;
                                }
                                p{
                                    width: 3rem;
                                    //background-color: blue;
                                }
                            }
                            .rights{
                                img{
                                    width: 0.26rem;
                                    height: 0.29rem;
                                    margin-right: 0.1rem;
                                }
                            }
                        }
                    }
                    .list-item:last-child{
                        border-bottom: none;
                    }
                }
            }
            .hot-show{
                margin-top: 0.2rem;
                height: auto;
                .top{
                    height: 1rem;
                    line-height: 1rem;
                }
                .list{
                    height: auto;
                    .list-item{
                        height: 1.75rem;
                        width: 100%;
                        border-bottom: 0.01rem solid #e9e9e9;
                        .left{
                            text-align: center;
                            //background-color: greenyellow;
                            font-weight: bold;
                            width: 0.8rem;
                            font-size: 0.55rem;
                        }
                        .red{
                            color: #F44349;
                        }
                        .right{
                            width: calc(100% - 1rem);
                            height: 100%;
                            //background-color: blue;
                            .lefts{
                                width: 1.5rem;
                                height: 1.5rem;
                                border-radius: 0.22rem;
                                object-fit: cover;
                            }
                            .rights{
                                height: 1.3rem;
                                width: calc(100% - 1.8rem);
                                //background-color: greenyellow;
                                .flex-column{
                                    height: 100%;
                                    .overFlow{
                                        //background-color: #F44349;
                                        width: 3.5rem;
                                    }
                                }
                                .yuan{
                                    width: 0.56rem;
                                    height: 0.56rem;
                                    margin-right: 0.2rem;
                                }
                                .fire{
                                    width: 0.32rem;
                                    height: 0.35rem;
                                    margin-left: 0.3rem;
                                    margin-right: 0.2rem;
                                }
                                .fires{
                                    width: 0.32rem;
                                    height: 0.35rem;
                                    margin-right: 0.2rem;
                                }
                                .play{
                                    img{
                                        width: 0.44rem;
                                        height: 0.44rem;
                                    }
                                }
                            }
                        }
                    }
                    .list-item:last-child{
                        border-bottom: none;
                    }
                }
            }
            .hot-radio{
                height: auto;
                .top{
                    height: 1rem;
                    line-height: 1rem;
                }
                .list{
                    .list-item{
                        height: 2rem;
                        .left{
                            font-size: 0.55rem;
                            font-weight: 800;
                            margin-right: 0.4rem
                        }
                        .red{
                            color: #F44349
                        }
                        .cove{
                            width: 1.8rem;
                            height: 1.8rem;
                            border-radius: 0.12rem;
                            object-fit: cover;
                            margin-right: 0.3rem;
                        }
                        .right{
                            width: calc(100% - 2.8rem);
                            height: 1.5rem;
                            img{
                                width: 0.25rem;
                                height: 0.25rem;
                                margin-right: 0.3rem;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>